import { EditArea } from "@/pages/lowCodeEditorPlus/components/EditArea";
import { Setting } from "@/pages/lowCodeEditorPlus/components/Setting";
import { MaterialWrapper } from "@/pages/lowCodeEditorPlus/components/MaterialWrapper";
import { useRef, useState } from "react";
import { ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { StretchBtn } from "@/pages/lowCodeEditorPlus/components/StretchBtn";
export function EditView() {
  const [visible, setVisible] = useState(true);

  const ref = useRef<ImperativePanelHandle>(null);
  const collapsePanel = () => {
    setVisible(!visible);

    const panel = ref.current!;
    visible? panel.collapse() : panel.expand();
  };
  return (
    <PanelGroup direction="horizontal">
      <MaterialWrapper />

      <Panel defaultSize={100} minSize={20} id="edit" order={2}>
        <EditArea />
      </Panel>

      <PanelResizeHandle className="relative" disabled={!visible}>
        <StretchBtn defaultDirection="left" expand={visible} toggleFn={() => collapsePanel()} />
      </PanelResizeHandle>
      <Panel style={{ flexBasis: `${visible ? 284 : 0}px` }} collapsible ref={ref} maxSize={60} id="setting" order={3}>
        <Setting />
      </Panel>
    </PanelGroup>
  );
}
